<template>
  <div>
    <a-button type="primary" @click="showModal">新增角色</a-button>
    <a-modal v-model:open="open" title="新增角色" @ok="handleOk">
      <EditForm ref="rForm"></EditForm>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import EditForm from './edit-form.vue'
import { createRolesApi } from '@/api/role.api.ts'

const emits = defineEmits(['editOk'])

const open = ref<boolean>(false)

const showModal = () => {
  open.value = true
  rForm.value?.clearFormState();
}

const rForm = ref()
const handleOk = () => {
  rForm.value.submit().then((res: never) => {
    createRolesApi(res).then(() => {
      open.value = false;
      emits('editOk')
    })
  })
}

defineOptions({
  name: 'AddDictModal',
})
</script>
